import { storeAll } from '@/store'
import { Button, Form, Input, InputNumber, Radio, message } from 'antd'
import React, { useState } from 'react'

import './style.scss'
import Upload from '@/components/upload'
import { addParkingLotRequest } from '@/apis/parking';
import { layout, tailLayout } from '@/utils/contants'

const AddParkingLot: React.FC = () => {
	const [picUrl, setPicUrl] = useState<string>('')
	const [form] = Form.useForm()
	const { adminStore: { adminInfo: { building } }, parkingLotTypeStore: { parkingLotType }, parkingStore: { getParkingLot } } = storeAll

	const onFinish = (value: any) => {
		value.building = building
		value.picture = picUrl
		addParkingLotRequest(value).then((res: any) => {
			message.success(res.message)
			form.resetFields()
			getParkingLot()
		})
	}

	const getImgUrl = (url: string) => {
		setPicUrl(url)
	}
	return <div className="addParkingLotWrap">
		<Form {...layout} form={form} onFinish={onFinish}>
			<Form.Item name="building" label="楼栋">
				<Input defaultValue={building} disabled />
			</Form.Item>
			<Form.Item label="楼层" name="storey" rules={[{ required: true }]}>
				<InputNumber min={1} max={4} />
			</Form.Item>
			<Form.Item label="行" name="x" rules={[{ required: true }]}>
				<InputNumber min={1} max={5} />
			</Form.Item>
			<Form.Item label="列" name="y" rules={[{ required: true }]}>
				<InputNumber min={1} max={10} />
			</Form.Item>
			<Form.Item label="类型" name="type" rules={[{ required: true }]}>
				<Radio.Group>
					{
						parkingLotType.map((item) => (
							<Radio id={item.id + ''} value={item.id}>{item.notes}</Radio>
						))
					}
				</Radio.Group>
			</Form.Item>
			<Form.Item label="图片" name="picture">
				<Upload getImgUrl={getImgUrl} src={picUrl}></Upload>
			</Form.Item>
			<Form.Item {...tailLayout}>
				<Button type="primary" htmlType="submit">
					添加
				</Button>
				<Button htmlType="button" onClick={() => form.resetFields()}>
					重置
				</Button>
			</Form.Item>
		</Form>
	</div>
}

export default AddParkingLot